<template>
	<view class="">
		<view class="content">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="info" ref="uForm" labelWidth="120">
				<view style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1rpx solid #d6d7d9;padding-bottom: 20rpx;">
					<view class="">头像</view>
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<image style="width:80rpx;height: 80rpx;border-radius: 40rpx;" :src="info.headImg" mode="" @tap="updateHeadimg()"></image>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <u-form-item label="账号" prop="info" borderBottom ref="item1">
					<u--input v-model="info" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
				<u-form-item label="昵称" prop="info.userName" borderBottom ref="item1">
					<u--input v-model="info.userName" border="none" placeholder="请输入"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="真实姓名" prop="info.realname" borderBottom ref="item1">
					<u--input v-model="info.realname" border="none" placeholder="请输入"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item
					label="性别"
					prop="userInfo.gender"
					borderBottom
					@click="
						showSex = true;
					"
					ref="item1"
				>
					<u--input v-model="info.genderName" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="生日" prop="info.birth" borderBottom ref="item1">
					<u--input v-model="info.birth" border="none" placeholder="请输入"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="手机" prop="info.mobile" borderBottom ref="item1">
					<u--input v-model="info.mobile" border="none" placeholder="请输入"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="版本号" prop="info.mobile" borderBottom ref="item1">
					<u--input v-model="version" disabledColor="#ffffff" disabled border="none" ></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错" @close="showSex = false" @select="sexSelect"></u-action-sheet>
		</view>
		<view class="" style="width: 100%;display: flex;align-items: center;justify-content: space-around;margin-top: 100rpx;">
			<view
				class=""
				style="width: 600rpx;height: 80rpx;border-radius: 40rpx;background-color: #016eff;color: #fff;display: flex;align-items: center;justify-content: center;"
				@tap="update"
			>
				保存信息
			</view>
		</view>
		<view class="" style="width: 100%;display: flex;align-items: center;justify-content: space-around;margin-top: 40rpx;">
			
			<view
				class=""
				style="width: 600rpx;height: 80rpx;border-radius: 40rpx;background-color: #89b8ff ;color: #fff;display: flex;align-items: center;justify-content: center;"
				@tap="layout"
			>
				退出登陆
			</view>
		</view>
	</view>
</template>

<script>
import { searchAdminUserById, updateAdminUser,uploadImages } from '../../../utils/api.js';
export default {
	data() {
		return {
			showSex: false,
			
			info:{

			},
			actions: [
				{
					name: '男',
					id:0
				},
				{
					name: '女',
					id:1
				},
				
			],
			rules: {
				'info': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				}
			},
			version:''
		};
	},
	onShow() {
		this.getuserInfo()
		const miniProgram  = wx.getAccountInfoSync();
		this.version=miniProgram.miniProgram.version
	},
	methods: {
		sexSelect(e) {
			this.info.gender = e.id;
			this.info.genderName=e.name
		},
		getuserInfo() {
			let self = this;
			let data = {
				id: uni.getStorageSync('userInfo').id
			};
			searchAdminUserById(data).then(res => {
				if (res.code == 200) {
					console.log(res.body);
					this.info = res.body;
					console.log(this.info,555);
					if(this.info.gender==0){
						this.info.genderName='男'
					}else if(this.info.gender==1){
						this.info.genderName='女'
					}
				}
			});
		},
		updateHeadimg(){
			let that=this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
					console.log(res);
						let data={
							file:res.tempFilePaths[0], //你要传的临时文件
							type:1
						}
					uploadImages(data).then(ress=>{
						if(ress.code==200){
							that.info.headImg=ress.body
							console.log(that.info.headImg)
						}
					})

				}
			});
					

		},
		// 修改信息
		update(){
			console.log(this.info,666);
			updateAdminUser(this.info).then(res=>{
				if(res.code==200){
					uni.showToast({
						icon:'none',
						title:'信息保存成功'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},600)
				}
			})
		},
		// 退出登陆
		layout(){
			let self=this;
			uni.showModal({
				title: '提示',
				content: '确定要退出登陆吗?',
				success: function(res) {
					if (res.confirm) {
						uni.removeStorage({
							key: 'userInfo',

						});
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},600)
					}
				}
			});
		}
	},
	// onReady() {
	// 	//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	// 	this.$refs.uForm.setRules(this.rules);
	// }
};
</script>
<style lang="scss">
page {
	padding: 20rpx;
	box-sizing: border-box;
}

.content {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
}
input {
	text-align: right !important;
}
</style>
